<template>
	<view class=" gui-flex gui-space-between gui-align-items-center">
		<view v-if="$slots['default']" @tap="open" :style="{background:$store.state.base.qjcolor}"
			class="gui-text-small gui-color-white gui-padding-small gui-border-radius gui-icons">
			<slot>{{slot}}</slot>
		</view>

		<gui-modal @close="close()" ref="popup"
			:customClass="['gui-bg-white', 'gui-dark-bg-level-3', 'gui-border-radius']" :title="title">
			<template v-slot:content>
				<view class=" gui-margin">
					<hyb-upload ref="upload" :maxFileNumber="4" v-if="upload" v-model="uploads"></hyb-upload>


					<view v-if="isInput"
						class="gui-padding gui-margin-top gui-bg-gray gui-border-b gui-border-radius gui-flex gui-space-between gui-align-items-center">
						<input placeholder-style="color:rgba(121, 121, 121, 0.6)" style="font-size: 25rpx;"
							v-model="val" type="text" :placeholder="placeholder" />
					</view>

					<view v-else
						class="gui-padding gui-margin-top gui-bg-gray gui-border-b gui-border-radius gui-flex gui-space-between gui-align-items-center">
						<textarea placeholder-style="color:rgba(121, 121, 121, 0.6)" style="font-size: 25rpx;"
							v-model="val" type="text" :placeholder="placeholder" />
					</view>
				</view>
			</template>

			<!-- 利用 flex 布局 可以放置多个自定义按钮哦  -->
			<template v-slot:btns>
				<view class="gui-padding">
					<button type="default" @tap="comfirm" class="gui-button-mini  gui-bg-blue gui-color-white">
						确认
					</button>
				</view>
			</template>
		</gui-modal>
	</view>

</template>

<script>
	export default {
		name: "hyb-popup-input",
		props: {
			title: {
				type: String,
				default: ""
			},

			placeholder: {
				type: String,
				default: "请输入....."
			},


			tip: {
				type: String,
				default: ""
			},

			minLength: {
				type: Number,
				default: 0
			},

			isInput: {
				type: Boolean,
				default: false
			},


			upload: {
				type: Boolean,
				default: false
			},
		},
		data() {
			return {
				val: '',
				uploads: [],
			};
		},

		methods: {

			close() {
				// 注意：此方法是 gui-modal 的 @close 回调，切勿再次调用 popup.close()，否则会递归触发
				this.$emit('close');
			},

			open() {
				this.val = "";
				this.uploads = [];
				this.$refs.popup.open();
			},

			// 对外暴露重置方法，供父组件调用（如 this.$refs.messagePopup.reset()）
			reset() {
				this.val = "";
				this.uploads = [];
				// 尝试重置内部上传组件的状态
				if (this.$refs.upload) {
					try {
						this.$refs.upload.items = [];
						this.$refs.upload.files = [];
						this.$refs.upload.urls = [];
						this.$refs.upload.bg = "";
					} catch (e) {}
				}
			},

			async comfirm() {
				if (this.title !== '添加付款凭证' && this.val.trim().length == 0) {
					uni.showToast({
						title: this.tip ? this.tip : ("请输入" + this.title),
						icon: 'none'
					})
				} else if (this.val.trim().length < this.minLength) {
					uni.showToast({
						title: "最少输入" + this.minLength + "个字",
						icon: 'none'
					})
				} else {
					if (this.upload) {
						await this.$refs.upload.uploadAsync();
					}
					this.$refs.popup.close();

					this.$emit("comfirm", this.val, this.uploads)
				}
			},
		}
	}
</script>

<style>
	.gui-button {
		padding: 0 !important;
	}
</style>
